<html>
    <head>
        <meta charset="utf-8">
        <meta name="author" content="xsl">
        <script src="jquery-3.1.1.js"></script>
        <title></title>
        <style>
        body{
            font-size: 12px;
            color: #666;
        }
        ul,p{
            margin: 0;
            padding: 0;
        }
        #star{
            width: 600px;
            margin: 10px auto;
            position: relative;
        }
        #star span,#star ul{
            float: left;
            margin: 0 5px;
        }
        #star li{
            list-style-type: none;
            float: left;
            width: 24px;
            height: 24px;
            cursor: pointer;
            background-image: url(../img/star.png);
            background-repeat: no-repeat;
        }
        #star li.get{
            background-position: 0 -28px;
        }
        #star p{
            position: absolute;
            top: 40px;
            width: 160px;
        }
        #star p b{
            display: block;
            font-style: normal;
            color: #f60;
        }
        #star strong{
            color: #f60;
        }
        </style>
    </head>
    <body>
        <div id="star">
            <span>点击星星进行评分</span>
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <span class="fin"></span>
            <p></p>
        </div>
    </body>
</html>
<script>
    // 创建数组
    var msg = ["很不满意|差得太离谱，与卖家描述的严重不符，非常不满",
        "不满意|部分有破损，与卖家描述的不符，不满意",
        "一般|质量一般，没有卖家描述的那么好",
        "满意|质量不错，与卖家描述的基本一致，还是挺满意的",
        "非常满意|质量非常好，与卖家描述的完全一致，非常满意"
        ]
    //   鼠标进去和离开事件
      $('ul li').hover(function(){
           //  添加类名前面的清除后面的 
            $(this).addClass('get').prevAll().addClass('get')
            $(this).nextAll().removeClass('get')
            // 显示评语,建议给$(this).inde()找个赋值
            $('p').html('<b>'+($(this).index()+1)+'分'+msg[$(this).index()].split('|')[0]+'</b><br>'+msg[$(this).index()].split('|')[1])
            // 改变评语位置
            // var zuo = $('ul').offsetLeft +$(this).offsetWidth*$(this).index()+'px'
            var wz = 110+24*$(this).index()+'px'
            $('p').css('left',wz)
      },function(){
          $('p').html('')
         $(this).removeClass('get').siblings().removeClass('get')
      })
        
      

     //  鼠标点击事件
     $('ul li').click(function(){
         var now = $(this)
         $(this).prevAll().addClass('get')
         $(this).nextAll().removeClass('get')
         $('.fin').html('<b>'+($(this).index()+1)+'分'+msg[$(this).index()].split('|')[0]+'</b>&nbsp;&nbsp;'+msg[$(this).index()].split('|')[1])
         
         $('ul li').mouseout(function(){
           now.addClass('get').prevAll().addClass('get')
           now.nextAll().removeClass('get')
           
      })
     })
      
</script>